<template>
    <div>
        <el-container>
            <el-header style="color:white;font-size:20px;font-family: 黑体 ;font-weight:bold">全部报警信息</el-header>
        </el-container>
        <div class="coustom-font">
            <el-row style="display:flex">
                所属单位:
                <el-select v-model="value"  style="width: 200px;margin-top: -10px" placeholder="请选择 所属单位">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                单位限制:
                <el-select v-model="value"  style="width: 200px;margin-top: -10px" placeholder="包括下级单位">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                选择站点:
                <el-select v-model="value"  style="width: 200px;margin-top: -10px" placeholder="请选择 选择站点">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                报警类型:
                <el-select v-model="value"  style="width: 200px;margin-top: -10px" placeholder="请选择 报警类型">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-row>
            <el-row style="display:flex;margin-top: 20px">
                设备类型:
                <el-select v-model="value"  style="width: 200px" placeholder="请选择 设备类型">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <p style="text-indent: 1em">设备号:</p>
                <el-select v-model="value"  style="width: 200px" placeholder="请选择 设备号">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <p style="text-indent: 1em">状态：</p>
                <el-select v-model="value"  style="width: 200px" placeholder="未处理">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                处理类型:
                <el-select v-model="value"  style="width: 200px" placeholder="请选择 处理类型">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-row>
            <el-row style="display:flex  ">
                <div class="block" style="margin-top: 10px">
                    <span class="demonstration">
                        开始时间:
                    </span>
                    <el-date-picker
                            style="width: 200px"
                            v-model="value1"
                            type="datetime"
                            placeholder="请选择 开始时间">
                    </el-date-picker>
                </div>
                <div class="block" style="margin-top: 10px">
                    <span class="demonstration">
                        结束时间:
                    </span>
                    <el-date-picker
                            style="width: 200px"
                            v-model="value1"
                            type="datetime"
                            placeholder="请选择 结束时间">
                    </el-date-picker>

                    <button  type="button" class=" el-button el-button--primary el-button--small">
                        <i class="el-icon-search"></i>
                        搜 索
                    </button>
                    <button type="button" class="el-button el-button--default el-button--small">
                        <i class="el-icon-delete"></i>
                        <span>清 空</span>
                    </button>
                </div>
            </el-row>
        </div>
        <div>
            <el-row>
                <div class="all-card-headleft">
                    <button type="button" class="el-button el-button--default el-button--small">
                        <span>批量处理</span>
                    </button>
                    <button type="button" @click="open1" class="el-button el-button--default el-button--small">
                        <span>批量导出</span>
                    </button>
                </div>
                <div style="margin-top: -30px" class="all-card-headright">
                    <button type="button" class="el-button  el-button--small is-circle ">
                        <i class="el-icon-download" @click="open2"></i>
                    </button>
                    <button type="button" class="el-button  el-button--small is-circle ">
                        <i class="el-icon-refresh"></i>
                    </button>
                    <button type="button" class="el-button el-button--small is-circle ">
                        <i class="el-icon-s-operation"></i>
                    </button>
                    <button type="button" class="el-button el-button--default el-button--small is-circle avue-crud__searchShowBtn">
                        <i class="el-icon-search"></i>
                    </button>
                </div>
            </el-row>
        </div>
        <div class="boarderstyle">
            当前表格已选择0项
            <button type="button" class="el-button el-button--text el-button--small">
                <span>清 空</span>
            </button>
        </div>
        <div>
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="a"
                        label="所属单位">
                </el-table-column>
                <el-table-column
                        prop="b"
                        label="设备">
                </el-table-column>
                <el-table-column
                        prop="c"
                        label="报警类型">
                </el-table-column>
                <el-table-column
                        prop="d"
                        label="设备类型">
                </el-table-column>
                <el-table-column
                        prop="e"
                        label="设备号">
                </el-table-column>
                <el-table-column
                        prop="f"
                        label="报警内容">
                </el-table-column>
                <el-table-column
                        prop="g"
                        label="站点地址">
                </el-table-column>
                <el-table-column
                        prop="h"
                        label="报警地址">
                </el-table-column>
                <el-table-column
                        prop="i"
                        label="状态">
                    <span class="el-tag el-tag--danger el-tag--light">未处理</span>
                </el-table-column>
                <el-table-column
                        prop="j"
                        label="报警图">
                </el-table-column>
                <el-table-column
                        prop="k"
                        label="历史报警">
                </el-table-column>
                <el-table-column
                        prop="l"
                        label="上报时间">
                </el-table-column>
                <el-table-column
                        prop="m"
                        label="处理类型">
                </el-table-column>
                <el-table-column
                        prop="n"
                        label="备注">
                </el-table-column>
                <el-table-column
                        prop="o"
                        label="处理记录图">
                </el-table-column>
                <el-table-column
                        prop="p"
                        label="处理时间">
                </el-table-column>
                <el-table-column
                        prop="q"
                        label="操作">
                    <div style="margin: 3px;">
                        <button type="button" @click="dialogTableVisible = true" class="el-button el-button--success el-button--mini is-plain" style="margin: 3px;">
                            <i class="el-icon-s-operation" ></i>
                            <span >通知记录</span>
                        </button>
                        <button type="button" @click="open3" class="el-button el-button--success el-button--mini is-plain" style="margin: 3px;">
                            <i class="el-icon-s-operation"></i>
                            <span>联动记录</span>
                        </button>

                    </div>
                    <div style="margin: 3px;">
                        <button type="button" @click="dialogTableVisible = true" class="el-button el-button--success el-button--mini is-plain" style="margin: 3px;">
                            <i class="el-icon-s-operation"></i>
                            <span>微信记录</span></button>
                        <button type="button" class="el-button el-button--success el-button--mini is-plain" style="margin: 3px;">
                            <i class="el-icon-view"></i>
                            <span>详情</span>
                        </button>
                        <button type="text" @click="dialogFormVisible = true" class="el-button el-button--success el-button--mini is-plain" style="margin: 3px;">
                            <i class="el-icon-edit"></i>
                            <span>处理</span>
                        </button>

                    </div>

                </el-table-column>
            </el-table>
            <el-dialog title="通信记录" :visible.sync="dialogTableVisible">
                <div class="mmm">
                    <button type="button" class="el-button el-button--small is-circle ">
                        <i class="el-icon-s-operation"></i>
                    </button>
                    <button type="button" class="el-button el-button--default el-button--small is-circle avue-crud__searchShowBtn">
                        <i class="el-icon-search"></i>
                    </button>
                </div>
                <el-table :data="gridData">
                    <el-table-column property="a" label="设备号" width="150"></el-table-column>
                    <el-table-column property="b" label="手机号" width="200"></el-table-column>
                    <el-table-column property="c" label="类型"></el-table-column>
                    <el-table-column property="d" label="扣除方式"></el-table-column>
                    <el-table-column property="e" label="状态"></el-table-column>
                </el-table>
            </el-dialog>
            <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="处理类型" :label-width="formLabelWidth">
                        <el-select v-model="form.region" placeholder="请选择 处理类型">
                            <el-option label="测试" value="shanghai"></el-option>
                            <el-option label="误报" value="beijing"></el-option>
                            <el-option label="真实" value="shanghai"></el-option>
                            <el-option label="其他" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <div class="block">
            <el-pagination class="pagination-container"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage4"
                           :page-sizes="[10, 20, 30, 40]"
                           :page-size="10"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="40">
            </el-pagination>
        </div>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                gridData: [{
                    a: '123',
                    b: '1',
                    c: '2',
                    d:'3',
                    e:'0',
                }],
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                tableData: [{
                    a: '开发区环境局',
                    b: '烟感',
                    c: '测试',
                    d:'感烟探测器',
                    e:'868913',
                    f:'报警测试',
                    g:'朔城区振华东街',
                    h:'五楼答题',
                    i:'',
                    j:'',
                    k:'',
                    l:'',
                    m:'',
                    n:'',
                    o:'',
                    p:'',
                    q:'',
                }],
            };
            return {
                toggleSelection : false
            };
            return {
                formInline: {
                    user: '',
                    region: ''
                }
            };
            return {
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4
            };
        },
        methods: {
            open3() {
                this.$message('暂无现场报警记录');
            },
            onSubmit() {
                console.log('submit!');
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            open1() {
                this.$alert('总共导出14', '提示', {
                    confirmButtonText: '确定',
                    type:'warning',
                });
            },
            open2() {
                this.$alert('是否确定下载文件', '提示', {
                    confirmButtonText: '确定',
                    type:'warning',
                });
            },

        }

    }
</script>

<style>
    .el-input__inner {
        background-color: #242E66;
        color:white;
    }
    .coustom-font{
        font-size: 15px;
        color: white;
    }
    .pagination-container {
        display: flex;
        justify-content: flex-end;
    }
    .el-submenu__title{
        color:#fff;
    }
    .el-menu-item{
        color:#fff;
    }
    .el-pagination__jump {
        margin-left: 24px;
        font-weight: 400;
        color: #ededed;
    }
    .el-pagination__total {
        margin-right: 10px;
        font-weight: 400;
        color: #ededed;
    }
    .el-button--primary {
        color: #fff;
        border-color: #0f6cbc;
        background: #0f6cbc;
        background-color: #0f6cbc;
    }
    .el-button--small {
        padding: 9px 15px;
        font-size: 12px;
        border-radius: 3px;
    }
    .el-button {
        margin: 0 5px;
        background: #0f6cbc;
        background-color: #0f6cbc;
        border: 1px solid #dcdfe6;
        border-color: hsla(0,0%,100%,0);
        color: #fff;
        text-align: center;
        box-sizing: border-box;
    }
    .all-card-headleft{
        margin-top: 20px;
    }
    .all-card-headright{
        display: flex;
        justify-content: flex-end;
    }
    .boarderstyle{
        boarder-radius:4px;
        box-sizing: border-box ;
        padding: 0 10px;
        margin: 0 0 10px;
        color: #2196f3;
        border-width: 1px;
        border-style: solid;
        font-size: 14px;
        weight:600;
    }
    .el-table th.el-table__cell {
        overflow: hidden;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        background-color: #3F51B5;
    }
    .cell{
        color: white;
    }
    .el-table__cell{
        background-color: #242E66;
    }
    .el-button--text {
        border-color: transparent;
        color: #0ff;
        background: 0 0;
        padding-left: 0;
        padding-right: 0;}
    .mmm{
        display: flex;
        justify-content: end ;
    }

</style>